<template>
    <div>
        <!--查询表单-->
        <el-form :inline="true" :model="form" ref="form">
            <el-form-item prop="role" label="角色标识" label-width="80px">
                <el-input
                    v-model="form.role"
                    placeholder="角色标识"
                    size="medium"
                    clearable="clearable"
                />
            </el-form-item>
            <el-form-item prop="name" label="角色标识" label-width="80px">
                <el-input
                    v-model="form.name"
                    placeholder="角色名称"
                    size="medium"
                    clearable="clearable"
                />
            </el-form-item>
            <el-form-item>
                <el-button size="medium" type="primary" @click="search()">
                    <el-icon> <search/> </el-icon>
                    查询
                </el-button>
                <el-button size="medium" @click="reset()">
                    <el-icon> <refresh/> </el-icon>
                    重置
                </el-button>
                <el-button size="medium" type="success" @click="addRole()">
                    <el-icon> <plus/> </el-icon>
                    新增
                </el-button>
            </el-form-item>
        </el-form>
        <!--表格-->
        <el-table :data="page.records" border v-loading="loading" size="medium" :row-class-name="tableRowClassName">
            <!--序号-->
            <el-table-column type="index" header-align="center" align="center" width="60" label="序号">
                <template #default="scope">
                    <span>{{ page.offset + scope.$index + 1 }}</span>
                </template>
            </el-table-column>

            <el-table-column prop="role" header-align="center" align="center" label="角色标识" width="280"/>
            <!--角色名称-->
            <el-table-column prop="name" header-align="center" align="center" label="角色名称" min-width="180"/>
            <!--操作列-->
            <el-table-column header-align="center" fixed="right" align="center" width="200" label="操作">
                <template #default="scope">
                    <el-button type="primary" link size="small" @click="updateRole(scope.row.id)"
                               :disabled="scope.row.role === 'super'">
                        修改
                    </el-button>
                    <el-button type="danger" link size="small"  @click="deleteRole(scope.row.id)"
                               :disabled="scope.row.role === 'super'">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页组件-->

        <el-pagination style="margin-top: 10px"
            @size-change="pageSizeChange"
            @current-change="currentPageChange"
            :current-page="page.current"
            :total="page.total"
            :page-size="page.size"
            :page-sizes="[1, 15, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <!--表单组件-->
        <role-form ref="roleForm" @success="load()"></role-form>
    </div>
</template>

<script>
import RoleForm from "./RoleForm.vue";
export default {
    components: {
        RoleForm
    },
    data () {
        return {
            form: {
                id: null,
                role: '', // 角色标识
                name: ''  // 角色名称
            },
            page: {
                current: 1,
                size: 15,
                total: 0,
                records: []
            },
            loading: false,
        };
    },
    mounted: function () {
        this.load()
    },
    methods: {
        /**
         * 加载数据
         */
        load() {
            this.loading = true;
            let params = { //查询参数
                current: this.page.current,
                size: this.page.size,
                role: this.form.role,
                name: this.form.name
            }

            this.$http.get('/admin/role/select', {params: params}).then((resp) => {
                this.loading = false
                if (resp.success) {
                    this.page = resp.data
                }
            }).catch(() => {
                this.loading = false
            })
        },

        //查询：<el-button size="medium" @click="search()">
        search() {
            this.load()
        },
        //重置<el-button size="medium" @click="reset()">
        reset() {
            this.form = {
                name: '',
                role: ''
            }
            this.load()
        },
        //新增角色
        addRole() {
            this.$refs.roleForm.open()
        },
        //更新角色
        updateRole(id) {
            this.$refs.roleForm.open(id)
        },
        //删除角色
        deleteRole(id) {
            this.$messageBox.confirm('是否确定删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let param = {id: id}
                this.$http.post("/admin/role/remove", param).then((resp) => {
                    this.$message.success({
                        message: '删除成功'
                    })
                    this.load() //刷新表格
                })
            }).catch(() => {
            })
        },
        /**
         * 超级管理员用户颜色不同
         */
        tableRowClassName(row, rowIndex,) {
            return row.row.id === '0' ? 'warning-row': ''
        },
        /**
         * 翻页
         */
        currentPageChange(pageNo) {
            this.page.current = pageNo
            this.load();
        },

        /**
         * 改变pageSize
         */
        pageSizeChange(pageSize) {
            this.page.size = pageSize
            this.load();
        }

    }
}
</script>

<style scoped>

</style>